<template>
	<div class="news_show_wrapper">
		<div class="aside" v-if="!isDetail">
			<div class="headbox">
				<h2>{{ columnData.meta.title }}</h2>
			</div>
			<div class="content">
				<router-link v-for="(item, index) in columnSubData" :key="index" :to="item.path" class="el-icon-arrow-right">{{ showMenuData(item.path) }}</router-link>
			</div>
		</div>
		<router-view class="blist" />
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	computed: {
		...mapGetters(['menuData']),
		columnData() {
			let columnArr = this.$route.matched;
			return columnArr[columnArr.length - 2];
		},
		columnSubData() {
			let routeArr = this.$router.options.routes;
			let mainRoute = routeArr[routeArr.length - 1];
			let bookRoute = mainRoute.children.find((item) => item.name === this.columnData.name);
			return bookRoute.children.filter((item) => !item.hidden);
		},
		isDetail() {
			return this.$route.meta.isDetail;
		}
	},
	methods: {
		showMenuData(path) {
			let flatArr = this.$treeToFlat(this.menuData);
			let obj = flatArr.find((item) => item.value === path);
			return obj.name;
		}
	}
};
</script>

<style lang="scss" scoped>
.news_show_wrapper {
	display: flex;
	align-items: flex-start;
	height: 100%;

	.aside {
		width: 290px;
		flex-shrink: 0;
		margin-right: 40px;
		border: solid 1px #f4f4f4;
	}

	.headbox {
		display: flex;
		align-items: center;
		padding: 0 15px;
		height: 72px;
		background: url('../../assets/img/bg_aside_title.png') no-repeat center;

		h2 {
			font-size: 24px;
			line-height: 66px;
			font-weight: bold;
			font-family: 'simsun';
			color: #357c65;
			border-bottom: solid 3px #357c65;
			padding-top: 3px;
		}
	}

	.content {
		margin-top: 24px;

		a {
			display: block;
			height: 64px;
			line-height: 64px;
			padding: 0 15px;
			font-size: 18px;
			color: #2f3233;
			text-decoration: none;
			border-top: solid 1px #f4f4f4;

			&::before {
				display: none;
				font-size: 14px;
				margin-right: 10px;
			}

			&.router-link-active,
			&:hover {
				background-color: #357c65;
				color: #fff;

				&::before {
					display: inline;
				}
			}
		}
	}

	.blist {
		flex: 1;
		height: 100%;
		overflow: hidden;
	}
}
</style>
